<template>
  <div class="yy">
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

           <el-menu-item index="1" ><img class="a" src="../tlc/img/快递 (1).png"/></el-menu-item>
      <el-menu-item index="0"  class="z"><router-link :underline="false" to="/wlym"> 首页</router-link></el-menu-item>
        <el-menu-item index="2"  class="z">物理服务</el-menu-item>
        <el-menu-item index="3"  class="z">智能科技</el-menu-item>
          <el-menu-item index="4"  class="z">服务支持</el-menu-item>
             <el-menu-item index="5"  class="z">可持续发展</el-menu-item>
                  <el-menu-item index="6"  class="z">投资者关系</el-menu-item>
              <el-submenu index="2"  class="z">
                <template slot="title">关于我们</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
              </el-submenu>
              <div class="dd">快速登录/注册</div>
            </el-menu>

            <div class="line"></div>
            </el-header>
        
          
  

    <el-menu  :default-active="activeIndex2" class="wc" mode="horizontal"  @select="handleSelect"  background-color="#c7d6f9"
  text-color="#fff"
  active-text-color="#a0d919" style="width:100%">
      <el-menu-item index="4" class="a1"> <router-link :underline="false" to="/wljij"><img class="a" src="../tlc/img/004-查快递 (1).png"/><span class="zt">我要寄件</span></router-link><span></span></el-menu-item>
      <el-menu-item index="4" class="a2"> <router-link :underline="false" to="/wljid"><img class="a" src="../tlc/img/002-快递箱 (1).png"/><span class="zt">运单追踪</span></router-link><span></span></el-menu-item>
      <el-menu-item index="4" class="a3"> <router-link :underline="false" to="/pg"><img class="a" src="../tlc/img/005-收快递 (1).png"/><span class="zt">运费时效查询</span></router-link><span></span></el-menu-item>
</el-menu>


  <el-tabs v-model="activeName" stretch>
       <el-tab-pane label="我要寄件" name="first" >
            <el-row :gutter="24">
              <el-col :span="24" >
                <el-card shadow="always" class="w">
                  <el-descriptions title="寄方信息"  :column="2">
                  <el-descriptions-item label="姓名"><el-input v-model="ruleForm.orderSenderName" placeholder="请填写联系人姓名"></el-input></el-descriptions-item>
         
                  <el-descriptions-item label="联系电话"><el-input v-model="ruleForm.orderSenderPhone" placeholder="请填写手机号或固话"></el-input></el-descriptions-item>
                  <el-descriptions-item label="详细地址"><el-input v-model="ruleForm.orderTheSenderAddress" placeholder="请填写详细地址"></el-input></el-descriptions-item>

                  <el-descriptions-item label="下单时间"><el-input v-model="ruleForm.orderPlacedate" placeholder="请填写下单时间"></el-input></el-descriptions-item>
                   <!-- <el-descriptions-item label="下单时间">
                    <el-date-picker type="date" placeholder="选择下单日期" v-model="ruleForm.orderPlacedate" style="width: 100%;"></el-date-picker>
                  </el-descriptions-item> -->
                  <el-form-item label="地址">
                    <el-select v-model="ruleForm.isProvince"  placeholder="请选择省"  @change="provinceChange($event)" class="sen">
                      <el-option  v-for="(item, index) in provinceList" :key="item.name" :label="item.name" :value="index">
                      </el-option>
                    </el-select>

                    <el-select
                      v-model="ruleForm.orderTheCity"
                      placeholder="请选择市"
                      @change="cityChange($event)"
                      class="sh"
                    >
                      <el-option
                        v-for="(item, index) in cityList"
                        :key="item.name"
                        :label="item.name"
                        :value="index"
                      >
                      </el-option>
                    </el-select>

                    <el-select
                      v-model="ruleForm.orderArea"
                      placeholder="请选择区"
                      @change="orderArea($event)"
                      class="qq"
                    >
                      <el-option
                        v-for="(item, index) in countyList"
                        :key="item.name"
                        :label="item.name"
                        :value="index"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                
                   
                </el-form>
              </el-card>
              <br />
              <br />
            </el-col>

              <el-col :span="24">
                  <br/>
                    <br/>
                <el-card shadow="always" class="w">
                  <el-descriptions title="收方信息" :column="2">
                  <el-descriptions-item label="姓名"><el-input v-model="ruleForm.orderAddresseeName" placeholder="请填写联系人姓名"></el-input></el-descriptions-item>
                  <el-descriptions-item label="联系电话"><el-input v-model="ruleForm.orderAddresseePhone" placeholder="请填写手机号或固话"></el-input></el-descriptions-item>
                  <el-descriptions-item label="省市区"><el-input v-model="ruleForm.orderReceiptProvince" placeholder="请选择省市区"></el-input></el-descriptions-item>
                  <el-descriptions-item label="详细地址"><el-input v-model="ruleForm.orderAddresseeAddress" placeholder="请填写详细地址"></el-input>
                  </el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-col>
            </el-row>
             <el-form-item>
            
      </el-form-item>
       <br/>
       <br/>
       <div class="fs">付款方式:<el-select v-model="ruleForm.orderPaymentMethods" placeholder="请选择付款方式" >
                <el-option label="微信" :value="微信"></el-option>
                <el-option label="支付宝" :value="支付宝"></el-option>
                <el-option label="现金" :value="现金"></el-option> </el-select>

                
       </div>
       <div class="q">
          预结总价:<span>23</span>
        </div>
        
      <br/>
       <br/>
        <el-descriptions-item label="姓名"><el-input v-model="ruleForm.orderAddresseeName" placeholder="请填写联系人姓名"></el-input></el-descriptions-item>

        <el-button type="success" @click="updateAndAdd()">下单</el-button>
              <el-button type="info"  @click="ruleForm('ruleForm')">重置</el-button>
       </el-tab-pane>
    </el-tabs>
      <el-footer class="ss"> 
      <h1><img src="../tlc/img/11.png" style="width:100%"/></h1>
    </el-footer>
      </el-container>
</template>

<script>
import mapApi from "/src/mapApi";
import axios from "axios";
import mapApi from "/src/mapApi.js";
      export default {
      data() {
          return { 
            provinceList: [],
            cityList: [],
            countyList: [],
            activeName: 'first',
            ruleForm:{
                orderId: '',
                orderNumber:'',
                orderGoodsNumber:'',
                orderUserId:'',
                orderWaybillNumber:'',
                orderPlacedate:'2022-08-17 15:36:38',
                orderProvince:'',
                orderTheCity:'',
                orderArea:'',
                orderType:'',
                orderAddresseeAddress:'',
                orderAddresseeName:'',
                orderAddresseePhone:'',
                orderReceiptProvince:'',
                orderReceiptNet:'',
                orderReceiptArea:'',
                orderRecipientDetailedAddress:'',
                orderSenderAddress:'',
                orderSenderName:'',
                orderSenderPhone:'',
                orderTheSenderAddress:'',
                orderTransportDistance:'',
                orderMapLocation:'',
                orderPaymentMethods:'',
                orderFeeAmount:'',
                orderPaymentStatus:'',
                orderWhetherInsured:''
              },
    }
  },
   methods: {
     provinceChange(that) {
      this.ruleForm.isProvince =this.provinceList[that].name;
      this.ruleForm.isCity = "";
      this.ruleForm.isDistrict = "";
      this.cityList = this.provinceList[that].districts;

    },
    cityChange(that) {
      this.ruleForm.orderTheCity = this.cityList[that].name;
      this.countyList = this.cityList[that].districts;
    },
    addrChange(that) {
      this.ruleForm.orderArea = this.countyList[that].name;
      this.countyList = this.countyList[that].districts;
    },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      updateAndAdd(){
            //添加已成功
          console.log(this.ruleForm)
            axios.post("/api/network-tms-order/addOrder",this.ruleForm).then(data=>{
                 this.$message({
                   message: '恭喜你，下单成功！！',
                    type: 'success'
                 });
                
            })
          }
      },
}
</script>

<style scoped>
.zt{

     margin: -25px auto; 
    text-align: center;
   font-size: 25px;
   color: #000;
     position: relative;
}
.q {
  position: relative;
  text-align: left;
  left: 1240px;
  font-size: 20px;
}
.fs {
  position: relative;
  text-align: left;
  left: 150px;
  font-size: 20px;
}
.ss {
  width: 1500px;
  position: relative;
}
.w {
  width: 1200px;
  height: 410px;
  position: relative;
  left: 20px;
  margin: -10px auto;
  text-align: center;
  font-size: 25px;
}
.z {
  font-size: 18px;
  color: #000;
}
.a1 {
  position: relative;
  left: 200px;
}
.a2 {
  position: relative;
  left: 330px;
}
.a3 {
  position: relative;
  left: 470px;
}
.a4 {
  position: relative;
  left: 440px;
}
.a5 {
  position: relative;
  left: 570px;
}
.el-carousel__item h3 {
    color: #101701;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }


.el-icon-more{
text-align: right;
   color: #0b1b0b;
   height: 30%;
}
.dd{
text-align: right;
}
el-menu-item {
  size: 0cm;
  color: #000;
}
.a {
  margin: -17px auto;
  left: 50%;
}
.el-button {
  line-height: 20px;
  font-size: 17px;
  color: #000;
  width: 100px;
  border-radius: 4px;
}
.el-container {
  margin: -10px auto;
  margin-left: -10px;
  margin-right: -10px;
}
.el-header,
.el-footer {

  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
  border-radius: 4px
}

.el-aside {
  background-color: #dee0e4;
  color: #333;
  text-align: center;
  line-height: 200px;
  border-radius: 4px
}

.el-main {
  background-color: #f4f6f9;
  color: #333;
  font-size: 25px;
  text-align: center;
  line-height: 40px;
  border-radius: 4px
}
.home{
  background-color:#f5f7fa
}
.demo-image__lazy{
  height: 440px;
     margin: -10px auto; 
     text-align: center;
}


</style>